<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="/static/css/styles.css">
    <!-- 添加字体图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="login-container">
        <div class="login-box">
            <div class="logo">
                <img src="/static/images/deepsleep_logo1.png" alt="Logo">
            </div>

            <div class="form-header">
                <h2>注册账号</h2>
                <p>只需一个账号，即可访问所有服务</p>
            </div>

            <form class="login-form" id="registerForm" method="post" action="/register_process">

                <!-- 用户名输入 -->
                <div class="input-group">
                    <input type="text" id="user_name" placeholder="请输入您的用户名" name="user_name" required>
                    <label for="user_name"><i class="fas fa-user"></i></label> <!-- 用户图标 -->
                </div>

                <div class="input-group">
                    <input type="email" id="register-email" placeholder="请输入你的邮箱账号" name="user_mail" required>
                    <label for="register-email"><i class="fas fa-envelope"></i></label>
                </div>

                <!-- 获取验证码按钮 -->
                <button type="button" id="getCaptchaBtn" class="btn btn-captcha">获取验证码</button>

                <!-- 邮箱验证码输入 -->
                <div class="input-group">
                    <input type="text" id="mail_captcha" placeholder="请输入邮箱验证码" name="mail_captcha" required>
                    <label for="mail_captcha"><i class="fas fa-key"></i></label>
                </div>

                <div class="input-group">
                    <input type="password" id="register-password" placeholder="请输入密码" name="user_password" required>
                    <label for="register-password"><i class="fas fa-lock"></i></label>
                    <i class="fas fa-eye toggle-password"></i>
                </div>

                <div class="input-group">
                    <input type="password" id="confirm-password" placeholder="请确认密码" name="re_determine_user_password" required>
                    <label for="confirm-password"><i class="fas fa-lock"></i></label>
                </div>

                <!-- 新增验证码区域 -->
<!--                <div class="captcha-container">-->
<!--                    <div class="input-group">-->
<!--                        <input type="text" id="captcha-input" placeholder="请输入验证码" required>-->
<!--                        <label for="captcha-input"><i class="fas fa-shield-alt"></i></label>-->
<!--                    </div>-->
<!--                    <div class="captcha-image">-->
<!--                        <canvas id="captcha-canvas" width="120" height="40"></canvas>-->
<!--                        <button type="button" id="refresh-captcha" class="refresh-btn">-->
<!--                            <i class="fas fa-sync-alt"></i>-->
<!--                        </button>-->
<!--                    </div>-->
<!--                </div>-->

                <!-- 验证码 onclick设置了鼠标点击之后就从/captcha这个路由获取图片之后加上一个随机数让浏览器更新这个图片-->
                <!-- 验证码 -->
                <div class="verification-code">
                    <div class="captcha-container">
                        <!-- 验证码输入框 -->
                        <input type="text" name="captcha" placeholder="输入验证码" id="captcha">

                        <!-- 验证码图片 -->
                        <img src="/captcha?ts=123" id="captcha-img" onclick="reloadCaptcha()">
                    </div>
                </div>

                <div class="terms">
                    <small>注册即代表已阅读并同意我们的 <a href="#">用户协议</a> 与 <a href="#">隐私政策</a></small>
                </div>

                <button type="submit" class="login-button">注册</button>
            </form>

            <div class="links">
                <a href="/login" class="return-login">返回登录</a>
            </div>
        </div>
    </div>
    <script type="module" src="/static/js/register.js"></script>
</body>
</html>
